<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>KILLER ZEBRA STRIPES SAMPLE PAGE</title>

<style media="screen" type="text/css">
	p {
	width:500px;
	font-family: "lucida grande", verdana, sans-serif;
	font-size: 10pt;
	}

 	/* REQUIRED KILLER ZEBRASTRIPES CSS */
	.taglist {
		border: 1px solid #666666;
		margin-top:40px; margin-bottom:30px;
	}

	.taglist tbody tr td {
		font-family: "lucida grande", verdana, sans-serif;
		font-size: 8pt;
		padding: 3px 8px;
		border-left: 1px solid #D9D9D9;
	}
	
	.taglist tbody tr.selected td {
		background-color: #3d80df;
		color: #ffffff;
		font-weight: bold;
		border-left: 1px solid #346DBE;
		border-bottom: 1px solid #7DAAEA;
	}
	/* REQUIRED KILLER ZEBRASTRIPES CSS */
	
</style>

<script language="javascript" src="killerZebraStripes.js" type="text/javascript"></script>
</head>



<body onload="stripeTables('table1','#CAE8C8','table2', '#E1E1F0', 'table3', 'red');">


<a href="http://www.killersites.com/">
<img src="../imagesNew/killersitesLogo_Syntax.gif" alt="Home" width="199" height="37" border="0" >
</a>

	
<P>
This simple page is meant as a guide for your own work. You can see how striping your tables this way
makes it much easier for people to read the tables while at the same time making them look good!
</P>
<P>You can download a zip file that contains both the sample HTML page the Javascript file that contains the code that makes this work. </P>
<p>
To see what's going on in the page you should look at the source code on the bottom half of the page or use your browser to view the source. [View -> Source] in IE.
</p>



   <table width="482" border="0" cellspacing="3" cellpadding="3"   id="table1" class="taglist">
    <tr>
      <td>
	  <STRONG>TABLE 1 </STRONG></td>
      <td align="center">&nbsp;</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">YES</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">NO</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">WHAT</td>
    </tr>
  </table>  




<table width="482" border="0" cellspacing="3" cellpadding="3"   id="table2" class="taglist">
    <tr>
      <td width="382"><STRONG>TABLE 2 </STRONG></td>
      <td width="36" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">YES</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">NO</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">WHAT</td>
    </tr>
</table>	






 


<table width="482" border="0" cellspacing="3" cellpadding="3"   id="table3" class="taglist">
    <tr>
      <td width="382"><strong>TABLE 3 </strong></td>
      <td width="36" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">YES</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">NO</td>
    </tr>
    <tr>
      <td>some information WITH ZEBRA STRIPES</td>
      <td align="center">WHAT</td>
    </tr>
</table> 

  
  <table width="482" border="0" cellspacing="3" cellpadding="3" class="taglist">
    <tr>
      <td width="382"><strong>TABLE 4 </strong></td>
      <td width="36" align="center">&nbsp;</td>
    </tr>
    <tr>
      <td>some information - BUT NO ZEBRA STRIPES! :(</td>
      <td align="center">NO</td>
    </tr>
    <tr>
      <td>some information - BUT NO ZEBRA STRIPES! :(</td>
      <td align="center">YES</td>
    </tr>
    <tr>
      <td>some information - BUT NO ZEBRA STRIPES! :(</td>
      <td align="center">WHAT</td>
    </tr>
  </table> 
  
  
  <p>--------------------- SOURCE CODE ---------------------</p>
  
  
  
  <div style="border:1px dashed green; width:650px; padding:10px 10px 10px 10px; background-color: #F1F1F8 ">
  <p>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;&gt;<br>
    &lt;html&gt;<br>
    &lt;head&gt;<br>
    &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;&gt;<br>
    &lt;meta http-equiv=&quot;imagetoolbar&quot; content=&quot;no&quot;&gt;<br>
  &lt;title&gt;KILLER ZEBRA STRIPES SAMPLE PAGE&lt;/title&gt;</p>
  <p>&lt;style media=&quot;screen&quot; type=&quot;text/css&quot;&gt;</p>
  <p>p {<br>
    width:500px;<br>
    font-family: &quot;lucida grande&quot;, verdana, sans-serif;<br>
    font-size: 10pt;<br>
    }</p>
  <p> /* REQUIRED KILLER ZEBRASTRIPES CSS */<br>
    .taglist {<br>
    border: 1px solid #666666;<br>
    margin-top:40px; margin-bottom:30px;<br>
    }</p>
  <p> .taglist tbody tr td {<br>
  font-family: &quot;lucida grande&quot;, verdana, sans-serif;<br>
  font-size: 8pt;<br>
  padding: 3px 8px;<br>
  border-left: 1px solid #D9D9D9;<br>
  }<br>
  <br>
  .taglist tbody tr.selected td {<br>
  background-color: #3d80df;<br>
  color: #ffffff;<br>
  font-weight: bold;<br>
  border-left: 1px solid #346DBE;<br>
  border-bottom: 1px solid #7DAAEA;<br>
  }<br>
  /* REQUIRED KILLER ZEBRASTRIPES CSS */<br>
  <br>
&lt;/style&gt;</p>
  <p>&lt;script language=&quot;javascript&quot; src=&quot;killerZebraStripes.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br>
  &lt;/head&gt;</p>
  <p>&nbsp;</p>
  <p>&lt;body onload=&quot;stripeTables('table1','#CAE8C8','table2', '#E1E1F0', 'table3', 'red');&quot;&gt;<br>
  </p>
  <p>&lt;a href=&quot;http://www.killersites.com/&quot;&gt;<br>
  &lt;img src=&quot;../imagesNew/killersitesLogo_Syntax.gif&quot; alt=&quot;Home&quot; width=&quot;199&quot; height=&quot;37&quot; border=&quot;0&quot; &gt;<br>
  &lt;/a&gt;</p>
  <p> <br>
  &lt;P&gt;<br>
    This simple page is meant as a guide for your own work. You can see how striping your tables this way<br>
    makes it much easier for people to read the tables while at the same time making them look good!<br>
  &lt;/P&gt;</p>
  <p>&lt;p&gt;<br>
    To see what's going on in the page you should look at the source code: [View -&gt; Source] in IE.<br>
  &lt;/p&gt;</p>
  <p>&nbsp;</p>
  <p> &lt;table width=&quot;482&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;3&quot; id=&quot;table1&quot; class=&quot;taglist&quot;&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;<br>
&lt;STRONG&gt;TABLE 1 &lt;/STRONG&gt;&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;&amp;nbsp;&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;YES&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;NO&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;WHAT&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt; <br>
  </p>
  <p>&nbsp;</p>
  <p>&lt;table width=&quot;482&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;3&quot; id=&quot;table2&quot; class=&quot;taglist&quot;&gt;<br>
&lt;tr&gt;<br>
&lt;td width=&quot;382&quot;&gt;&lt;STRONG&gt;TABLE 2 &lt;/STRONG&gt;&lt;/td&gt;<br>
&lt;td width=&quot;36&quot; align=&quot;center&quot;&gt;&amp;nbsp;&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;YES&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;NO&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;WHAT&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt; <br>
  </p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p> <br>
  </p>
  <p>&lt;table width=&quot;482&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;3&quot; id=&quot;table3&quot; class=&quot;taglist&quot;&gt;<br>
&lt;tr&gt;<br>
&lt;td width=&quot;382&quot;&gt;&lt;strong&gt;TABLE 3 &lt;/strong&gt;&lt;/td&gt;<br>
&lt;td width=&quot;36&quot; align=&quot;center&quot;&gt;&amp;nbsp;&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;YES&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;NO&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information WITH ZEBRA STRIPES&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;WHAT&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt; </p>
<p> <br>
&lt;table width=&quot;482&quot; border=&quot;0&quot; cellspacing=&quot;3&quot; cellpadding=&quot;3&quot; class=&quot;taglist&quot;&gt;<br>
&lt;tr&gt;<br>
&lt;td width=&quot;382&quot;&gt;&lt;strong&gt;TABLE 4 &lt;/strong&gt;&lt;/td&gt;<br>
&lt;td width=&quot;36&quot; align=&quot;center&quot;&gt;&amp;nbsp;&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information - BUT NO ZEBRA STRIPES! :(&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;NO&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information - BUT NO ZEBRA STRIPES! :(&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;YES&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;tr&gt;<br>
&lt;td&gt;some information - BUT NO ZEBRA STRIPES! :(&lt;/td&gt;<br>
&lt;td align=&quot;center&quot;&gt;WHAT&lt;/td&gt;<br>
&lt;/tr&gt;<br>
&lt;/table&gt; <br>
  <br>
  <br>
  </p>
  <p> &lt;div style=&quot;margin-bottom:50px; &quot;&gt; <br>
&amp;copy; 2004 KillerSites.com &amp;#150; all rights reserved <br>
&lt;/div&gt;<br>
  </p>
  <p>&nbsp;</p>
  <p>&lt;/body&gt;<br>
  &lt;/html&gt;<br>
  </p>
  <p>&nbsp;  </p>
  <div style="margin-bottom:50px; ">	
	&copy; 2004 KillerSites.com &#150; all rights reserved	
  </div>
  

</div>

</body>
</html>
